Ext.onReady(function() {

    // 先创建一个AjaxTask
    var task = Ext.AjaxTask.add({
        id: 'ajaxtaskexample',
        url: 'ajaxtask.action',
        // 创建一个轮询任务, 间隔3秒钟刷新一次
        interval: 3000
    });

    // create some portlet tools using built in Ext tool ids
    var tools = [{
        id: 'gear',
        handler: function() {
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    }, {
        id: 'close',
        handler: function(e, target, panel) {
            panel.ownerCt.remove(panel, true);
        }
    }];

    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    var columns = [{
        id: 'company',
        header: "Company",
        width: 160,
        sortable: true,
        dataIndex: 'company'
    }, {
        header: "Price",
        width: 75,
        sortable: true,
        renderer: Ext.util.Format.usMoney,
        dataIndex: 'price'
    }, {
        header: "Change",
        width: 75,
        sortable: true,
        renderer: change,
        dataIndex: 'change'
    }, {
        header: "% Change",
        width: 75,
        sortable: true,
        renderer: pctChange,
        dataIndex: 'pctChange'
    }];

    var store = new Ext.data.JsonStore({
        task: 'ajaxtaskexample',
        url: 'loadstore',
        totalProperty: 'total',
        successProperty: 'success',
        idProperty: 'id',
        root: 'data',
        messageProperty: 'message',
        fields: [{
            name: 'company'
        }, {
            name: 'price',
            type: 'float'
        }, {
            name: 'change',
            type: 'float'
        }, {
            name: 'pctChange',
            type: 'float'
        }]
    });

    var grid = new Ext.grid.GridPanel({
        columns: columns,
        store: store,
        autoExpandColumn: 'company',
        height: 250,
        width: 600
    });

    store.load();

    var processSuccess = function(response, options) {
        var resp = Ext.decode(response.responseText);
        var data = [];
        for (var i = 0; i < 8; i++) {
            data.push('<p>' + resp.data + '</p>');
        }
        this.update(data.join(''));
    };

    var processFailure = function(response, options) {
        this.update('<p>请求失败!</p>');
    };

    var portal = new Ext.ux.Portal({
        renderTo: 'example-ct',
        region: 'center',
        autoScroll: false,
        border: false,
        margins: '35 20 0 0',
        items: [{
            columnWidth: .3,
            style: 'padding:10px 0 10px 10px',
            items: [{
                title: 'Panel 111111',
                style: 'padding:0px 0px 10px 0px',
                tools: tools,
                html: 'Loading...',
                listeners: {
                    afterrender: function(p) {
                        Ext.Ajax.request({
                            task: 'ajaxtaskexample',
                            url: 'loadpanel1',
                            success: processSuccess,
                            failure: processFailure,
                            scope: p
                        });
                    }
                }
            }, {
                title: 'Panel 222222',
                tools: tools,
                html: 'Loading...',
                listeners: {
                    afterrender: function(p) {
                        Ext.Ajax.request({
                            task: 'ajaxtaskexample',
                            url: 'loadpanel2',
                            success: processSuccess,
                            failure: processFailure,
                            scope: p
                        });
                    }
                }
            }]
        }, {
            columnWidth: .4,
            style: 'padding:10px 0 10px 10px',
            items: [{
                title: 'Grid in a Portlet',
                style: 'padding:0px 0px 10px 0px',
                layout: 'fit',
                tools: tools,
                items: grid
            }, {
                title: 'Panel 333333',
                tools: tools,
                html: 'Loading...',
                listeners: {
                    afterrender: function(p) {
                        Ext.Ajax.request({
                            task: 'ajaxtaskexample',
                            url: 'loadpanel3',
                            success: processSuccess,
                            failure: processFailure,
                            scope: p
                        });
                    }
                }
            }]
        }, {
            columnWidth: .3,
            style: 'padding:10px 10px; margin: 0px 10px 0px 0px',
            items: [{
                title: 'Panel 444444',
                style: 'padding:0px 0px 10px 0px',
                tools: tools,
                html: 'Loading...',
                listeners: {
                    afterrender: function(p) {
                        Ext.Ajax.request({
                            task: 'ajaxtaskexample',
                            url: 'loadpanel4',
                            success: processSuccess,
                            failure: processFailure,
                            scope: p
                        });
                    }
                }
            }, {
                title: 'Panel 555555',
                tools: tools,
                html: 'Loading...',
                listeners: {
                    afterrender: function(p) {
                        Ext.Ajax.request({
                            task: 'ajaxtaskexample',
                            url: 'loadpanel5',
                            success: processSuccess,
                            failure: processFailure,
                            scope: p
                        });
                    }
                }
            }]
        }]
    });

    // 开始Ajax Task
    task.start();

    // 增加一个停止按钮
    new Ext.ButtonGroup({
        renderTo: 'button-ct',
        border: false,
        style: 'padding:0px 10px',
        items: [{
            id: 'btn-start',
            text: '运行AjaxTask',
            disabled: true,
            style: 'margin:0px 10px 0px 0px',
            width: 120,
            height: 30,
            handler: function() {
                Ext.getCmp('btn-start').disable();
                Ext.getCmp('btn-stop').enable();
                task.start();
            }
        }, {
            id: 'btn-stop',
            text: '停止AjaxTask',
            style: 'margin:0px 10px 0px 0px',
            width: 120,
            height: 30,
            handler: function() {
                Ext.getCmp('btn-start').enable();
                Ext.getCmp('btn-stop').disable();
                task.stop();
            }
        }]
    });
});
